<template>
  <div>
    <h2 @click="changeData">修改name</h2>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    //1.定义可响应式对象
    const info = reactive({
      name: "pengfan",
      age: 18,
      friend: { name: "kobe" },
    });

    // 2.侦听器watch
    watch(
      () => ({ ...info }),
      (newInfo, oldInfo) => {
        console.log(newInfo, oldInfo);
      },
      { deep: true, immediate: true }
    );

    const changeData = () => {
      info.friend.name = "james";
    };
    return {
      info,
      changeData,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>